<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
        }
        .ls{
            width: 200px;
            background-color: brown;
        }
        .en{
            position: relative;
            width:100px;
            height: 100px;
        }
    </style>
</head>
<body>
     <!-- 鼠标放上去显示 移开消失 
        
  2. 点击登陆 弹出登录框点击X关闭登录框  
  3. 切换支付方式效果     
  4. 选项卡 [参考效果](https://www.jq22.com/yanshi24114)
  5. 模拟下拉框 [参考效果](https://www.jq22.com/webqd2375)
  6. 动态添加删除数据  [参考效果](https://www.jq22.com/webqd7039)
  7. 一个密码输入框，带有一个按钮用于切换显示或隐藏密码文本。  参考 https://www.jq22.com/yanshi374
  8. 字数统计  https://www.jq22.com/yanshi3282  -->
  <div id="app">
    <button @mouseover="show=true ">+</button>
    <div v-show="show"  @mouseout="show=false">qwert</div>
   
    <button @click="show2=true">登陆</button>
    <div>
        <button @click="show2=false">X</button>
        <input type="text" v-if="show2">
    </div>
    <!-- 3 -->
    <div>
        <div @click="qh=0" :class="{'ls':qh===0}">微信支付</div>
        <div @click="qh=1" :class="{'ls':qh===1}">支付宝支付</div>
        <div @click="qh=2" :class="{'ls':qh===2}">银行卡支付</div>
    </div>
    <!-- 4 -->
    <button @click="show4=1">1</button>
    <button @click="show4=2">2</button>
    <button @click="show4=3">3</button>
    <div class="en">
        <div v-if="show4===1">1</div>
        <div v-if="show4===2">2</div>
        <div v-if="show4===3">3</div>
    </div>
    <!-- 5 -->
    <select v-model="val">
        <option value="1">1</option>
        <option value="2">2</option>
    </select><br>
    <!-- 6 -->
    <input type="text" id="name" v-model="addname"><br>
    <button @click="add">添加</button>
    <div>
        <span v-for="(item,index) in list">{{item.name}} <button @click="sc(index)">删除</button></span>
    </div>
    <!-- 7 -->
    <input :type="x?'text':'password'">
    <button @click="x=!x">显示隐藏</button>
    <br>
    <!-- 8 -->
    <textarea placeholder="textarea还剩余字数统计" maxlength="200" v-model="zs"></textarea>
    <p>{{200-zs.length}}/200</p>
</div>
</body>
<script src="/vue.js"></script>
<script>
    const {createApp,ref}=Vue
    createApp({
        setup(){
            let show=ref(false)
            let show2=ref(false)
            let qh=ref(0)
            let show4=ref(1)
            let addname=ref()
            let list=ref([])
            let x=ref(false)
            let zs=ref('')
            function xs(){
                show2.value=true
            }
            function yc(){
                show2.value=false
            }
            function add(){
                list.value.push({
                    name:addname.value
                })
            }
            function sc(index){
                list.value.splice(index,1)
            }
            return{
                show,
                show2,
                xs,
                yc,
                qh,
                show4,
                add,
                list,
                addname,
                sc,
                x,
                zs
            }
        }
    }).mount('#app')
</script>
</html>